// js 主动向后端发送数据接口请求
// 前端向后端拉去数据
const tableBody = document.querySelector('table tbody');
const oForm = document.forms['aiForm'];
let movieInfo;
fetch('http://localhost:3000/search')
    // 数据到达前端 二进制 -> json  
    .then(res => res.json())
    .then(data => {
        // console.log(data);
        movieInfo = data.data;
        console.log(movieInfo);
        for (let info of movieInfo) {
            // console.log(info);
            //创建一个表格行（<tr>）元素
            let tr = document.createElement('tr');
            // for in json 对象遍历
            for (let key in info) {
                // 为每个属性值创建一个表格单元格（<td>）元素
                const td = document.createElement('td');
                if (key === 'src') {
                    // 如果是 src 属性，则创建一个 <img> 标签
                    const img = document.createElement('img');
                    img.src = info[key];
                    // 设置图片尺寸，这里设置为 100x100 像素，可以根据需要调整
                    img.style.width = '100px';
                    img.style.height = '100px';
                    td.appendChild(img);
                } else {
                    // 其他属性值则直接设置为单元格的文本内容
                    td.innerText = info[key];
                }
                tr.appendChild(td);
            }

            // 将表格行添加到表格主体（<tbody>）中
            tableBody.appendChild(tr)
        }
    })



oForm.addEventListener('submit', e => {
    e.preventDefault(); // 阻止表单默认行为 , 改用fetch 向 Ai serevr 发送数据 接口请求
    // 在fetch 不刷新页面的情况下 向 Ai serevr 发送数据 接口请求
    // web 2.0 动态页面开发  ,js fetch 可以主动拉去数据 


    const question = oForm.question.value.trim();

    if (!question) {
        alert('请输入问题');
        return;
    }

    fetch(`http://localhost:3000/chat?question=${question}&data=${movieInfo}`)
        .then(res => res.json())
        .then(data => {
            //console.log(data); 
            document.getElementById('message').innerText = data.data;
        })
})